#{meta /}

#{title values.get(0).value/}

#{javascript 'words/verb-edit.js'/}
#{stylesheet 'words/verb-edit.css'/}

#{body}

<div class="container">
	<div class="row">
		<div class="col-lg-10">
			<a href="@{verbs.VerbWordDetail.index(id, refer)}" class="back-link"><span class="glyphicon glyphicon-arrow-left"></span>返回</a>
		</div>
		<div class="col-lg-2 text-right">
			<button class="btn btn-danger" id="btn-delete-word">删除</button>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<table class="table" id="main-table">
				<tr>
					<th>动词</th>
					<td>
						<table id="table-values">
						#{list items:values, as:'value'}
							<tr>
								<td>${value.value}</td>
								<td>${value.type}</td>
								<td>
									#{list items:value.indexes, as:'index'}
										<span>${index}</span>
									#{/list}
								</td>
								<td><button class="btn btn-danger btn-sm btn-delete-value" data-id="${value.id}" #{if !value.canDelete}disabled#{/if}>删除</button></td>
							</tr>
						#{/list}
							<tr>	
								<td><input type="text" class="form-control" id="input-value"/></td>
								<td></td>
								<td></td>
								<td><button class="btn btn-default btn-sm" id="btn-add-value">添加</button></td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<th>含义</th>
					<td>
						<div id="editable-meanings" data-editable-value="${word.meaningsText}">
							#{list items:word.meanings, as:'meaning'}
								<div>${meaning}</div>
							#{/list}
							#{else}
								（无）
							#{/else}
						</div>
					</td>
				</tr>
				<tr>
					<th>词性</th>
					<td>
						<div class="form-inline" id="div-word-types">
							#{list items:types, as:'type'}
								<div class="checkbox">
									<label>
										<input type="checkbox" data-value="${type.value}" #{if type.has}checked#{/if}> ${type.name}
									</label>
								</div>
							#{/list}
						</div>
					</td>
				</tr>
				<tr>
					<th>词组</th>
					<td>
						<table id="table-fixwords">
							#{list items:fixwords, as:'fixword'}
								<tr>
									<td>${fixword.value}</td>
									<td><div class="editable-fixword-meaning">${fixword.meaning}</div></td>
									<td><button class="btn btn-danger btn-sm btn-delete-fixword">删除</button></td>
								</tr>
							#{/list}
							<tr>	
								<td><input type="text" class="form-control" id="input-fixword-value"/></td>
								<td><input type="text" class="form-control" id="input-fixword-meaning"/></td>
								<td><button class="btn btn-default btn-sm" id="btn-add-fixword">添加</button></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>
	</div>
</div>

#{/body}
